<script setup lang="ts">
import { ref, reactive, computed } from 'vue'

const task = ref('')

const tasks = reactive([
  { titles: '购物车', content: '吃的东西', finished: false },
  { titles: '父子组件传值', content: 'vue', finished: true },
  { titles: 'TO-DO-LIST', content: 'vue', finished: true }
])

//已完成
//computed(()=>list.filter(task=>task.completed).length);
const count_finished = computed(() => tasks.filter((t) => t.finished).length)

//方法
const addTask = () => {
  tasks.push({ titles: task.value, content: '', finished: false })
}
</script>

<template>
  <div>
    <h1>待办事项列表 to do List</h1>
    <span>一共{{ tasks.length }}项</span> <br />
    <span>已完成{{ count_finished }}项</span><br />
    <span>未完成{{ tasks.length - count_finished }}项</span>
    <div>
      <input type="text" v-model="task" />
      <button @click="addTask">添加</button>
    </div>
    <div>
      列表: <br />
      <ul>
        <li v-for="(t, index) in tasks" :key="index">
          <div>
            <input type="checkbox" v-model="t.finished" />
            {{ t.titles }}
          </div>
        </li>
      </ul>
    </div>
  </div>
</template>

<style scoped>
ul li {
  list-style: none;
  margin: 5px;
}
</style> 